<script lang="tsx" setup>
import { FormSchema } from '@/types/form'
import { TableColumn } from '@/types/table'
import { LiveTypeOptions } from '@/api/course/live'
import { useTable } from '@/hooks/web/useTable'
import * as CourseLiveApi from '@/api/course/live'
import EditLiveForm from '../form/edit-live-form.vue'
import { LiveTypeMapper } from '@/api/course/live'
import { LiveType } from '@/api/course/live'
import { ElButton } from 'element-plus'

const props = defineProps<{
  selectionMode?: boolean
}>()

const emit = defineEmits<{
  (e: 'select', id: string): void
}>()

const liveTypeFormatter = (_row, _column, value: LiveType) => LiveTypeMapper[value]

/** 表格字段 */
const columns: TableColumn[] = [
  {
    field: 'liveName',
    label: '直播名称'
  },
  {
    field: 'liveDesc',
    label: '直播描述'
  },
  {
    field: 'liveType',
    label: '直播类型',
    formatter: liveTypeFormatter
  },
  {
    field: 'roomId',
    label: '直播间id'
  },
  {
    field: 'action',
    label: '操作',
    formatter: (row: Recordable) =>
      !props.selectionMode ? (
        <>
          <ElButton type="primary" link onClick={() => openForm('update', row.id)}>
            编辑
          </ElButton>
          <ElButton type="danger" link onClick={() => delList(row.id, false)}>
            删除
          </ElButton>
        </>
      ) : (
        <ElButton type="primary" onClick={() => emit('select', row.id)}>
          选择
        </ElButton>
      )
  }
]
/** 列表相关方法 */
const {
  register: tableRegister,
  tableObject,
  tableMethods
} = useTable({
  getListApi: async (option: any) => {
    const { pageSize, pageNo, ...params } = option

    const newParams = Object.entries(params).reduce((prev, [key, value]) => {
      value && (prev[key] = value)
      return prev
    }, {})

    // 调用接口获取直播列表
    const res = await CourseLiveApi.getPage({ pageSize, pageNo, ...newParams })

    return {
      list: res.list,
      total: res.total
    }
  },
  delListApi: async (option) => {
    await CourseLiveApi.deleteById(option)
    return {}
  }
})
const { getList, setSearchParams, delList } = tableMethods

/** 初始化时加载列表 */
onMounted(getList)

/** 搜索栏 */
const searchFields: FormSchema[] = [
  {
    field: 'liveName',
    label: '直播名称',
    component: 'Input',
    colProps: { span: 5 }
  },
  {
    field: 'liveType',
    label: '直播类型',
    component: 'Select',
    componentProps: { options: LiveTypeOptions },
    colProps: { span: 5 }
  }
]

/** 新增/编辑弹窗 */
const formRef = ref()
const openForm = (type: string, id?: string) => {
  formRef.value.open(type, id)
}
</script>

<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <Search :schema="searchFields" @search="setSearchParams">
      <template #actionMore>
        <el-button
          v-if="!selectionMode"
          type="primary"
          @click="openForm('create')"
          v-hasPermi="['train:course:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 添加
        </el-button>
      </template>
    </Search>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <Table
      @register="tableRegister"
      :columns="columns"
      :data="tableObject.tableList"
      row-key="id"
      :loading="tableObject.loading"
      :pagination="{ total: tableObject.total }"
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
    />
  </ContentWrap>

  <!-- 新增/编辑弹窗 -->
  <EditLiveForm ref="formRef" @success="getList" />
</template>
